<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset=UTF-8"">
    <title>任务进度表</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${contextPath}/static/bootstrap/css/bootstrap-table.css" />
    <link rel="stylesheet" href="${contextPath}/static/ace/assets/css/ace.css" />
    <link rel="stylesheet" href="${contextPath}/static/bootstrap/css/bootstrap-select.css" />
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/ztree/css/zTreeStyle.css" />
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/bootstrap/js/bootstrap-table.js"></script>
    <script src="${contextPath}/static/bootstrap/js/bootstrap-table-zh-CN.js"></script>
    <script src="${contextPath}/static/bootstrap/js/bootstrap-select.min.js"></script>
    <script src="${contextPath}/static/bootstrap/js/defaults-zh_CN.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script src="${contextPath}/static/util/dateutils.js"></script>
    <script src="${contextPath}/static/util/protutils.js"></script>
    <style type="text/css">
        input.combo-input{
            padding:7px 4px;
        }
        .panel{
            margin-bottom:0px;
        }
        .bs-actionsbox .btn-group button {
            width: 45%;
        }
        .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
            width: 100%;
        }
        .list-group-item{
            padding:5px 6px;
            font-size:11px;
        }
        #zoneCode .list-group .list-group-item:first-child{
            padding:7px 6px;
        }
        .panel-heading::after {
            content: "";
            display: block;
            clear: both;
        }
        .caret{
            color:#ABBAC3;
        }
        .bootstrap-select > .btn{
            color:#ABBAC3 !important;
            background-color: #fff !important;
            text-shadow:none;
            border-width:1px;
        }
        .bootstrap-select > .btn:hover, .bootstrap-select > .btn:focus:hover, .bootstrap-select > .btn.focus:hover, .bootstrap-select > .btn:active:hover, .bootstrap-select > .btn:focus:active, .btn-default:focus:active, .open > .btn.dropdown-toggle, .open > .btn-default.dropdown-toggle, .open > .btn.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:hover, .open > .btn.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:focus, .open > .btn.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle.focus, .open > .btn.dropdown-toggle:active, .open > .btn-default.dropdown-toggle:active {
            background-color: #fff !important;
            border-color: #ABBAC3;
        }
        .fixed-table-footer{
            overflow: auto;
        }
        .dropdown-header{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title pull-left" style="text-shadow:2px 1px 2px #ABBAC3">任务进度表</h3>
        <h5 class="pull-right" id="timeCount" style="margin-top: 0;margin-bottom: 0;"></h5>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" class="form-inline" style="margin-bottom: 5px;"
              action="${contextPath}/ktcount/exportExcelTaskAnalysis" method="post" id="exportExcel">
            <input id="sortName" name="sortName" type="hidden" value="" />
            <input id="sortOrder" name="sortOrder" type="hidden" value="">
            <div class="form-group">

                <div class="col-sm-3">
                    <div class="input-group ">
                        <input id="areaName" name="areaName" class="form-control" placeholder="选择区域" readonly/>
                        <input id="areaCode" name="areaCode" type="hidden" />
                        <span class="input-group-btn">
		                        	<div class="btn btn-primary btn-sm" onclick="javascript:$('#areaModal').modal('show');">
										选择
									</div>
	                        	</span>
                    </div>

                </div>
                <div class="col-sm-3">
                    <select class="selectpicker" multiple data-live-search="true" title="请选择店铺名称" data-live-search-placeholder="搜索" data-actions-box="true" id="shopName">
                        <optgroup label="直营" data-icon="glyphicon-ok">
                            <c:forEach items="${shopnames}" var="shopname">
                                <c:if test="${shopname.shopType=='直营'}">
                                    <option value="${shopname.shopId}">${shopname.shopName}</option>
                                </c:if>
                            </c:forEach>
                        </optgroup>

                    </select>
                    <input type="hidden" name="shopName" id="shopname" />
                    <input type="hidden" name="shopIdName" id="shopIdName" />
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="turnCreateDate" name="turnCreateDate" placeholder="查询开始时间" readonly />
                </div>

                <div class="col-sm-2">

                    <button type="button"  id="btn_query" class="btn btn-sm btn-info">查询</button>

                </div>

            </div>

            <input type="hidden" id="colsTitles" name="colsTitles" />
            <input type="hidden" id="colsFields" name="colsFields" />
        </form>
    </div>
</div>
<div id="toolbar" class="btn-group" style="margin-left:15px">
    <button id="btn_refresh" type="button" class="btn btn-sm btn-warning">
        <span class="glyphicon glyphicon-refresh icon-refresh" aria-hidden="true"></span>刷新
    </button>
    <button onclick="exportExcel();" type="button" class="btn btn-sm btn-success">
        <span class="glyphicon glyphicon-file" aria-hidden="true"></span>导出
    </button>
    <button onclick="doPrint();" type="button" class="btn btn-sm btn-default">
        <span class="glyphicon glyphicon-print" aria-hidden="true"></span>打印
    </button>
    <button onclick="selectAll();" type="button" class="btn btn-sm btn-primary">
        全选
    </button>
    <button onclick="unSelectAll();" type="button" class="btn btn-sm btn-primary">
        不选
    </button>

    <button type="button" class="btn btn-sm btn-success"
            onclick="javascript:window.history.go(-2);window.close();">
        <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>返回</button>
</div>
<!--startprint-->
<table id="kt_ssanalyse"></table>
<!--endprint-->
<div id="typeModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="typeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="typeModalLabel">
                    选择商品类型
                </h4>
            </div>
            <div class="modal-body">
                <ul id="typetree" class="ztree">
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="javascript:selectedTypes()">
                    确认
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div id="areaModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="areaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="areaModalLabel">
                    选择区域
                </h4>
            </div>
            <div class="modal-body">
                <ul id="areatree" class="ztree">
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="javascript:selectedAreas()">
                    确认
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">
    var ISFIRSTLOAD = true;
    $(function () {
        //初始化时间
        timeCount();
        //获取区域
        getArea();
        //优化时间
        initDatetimepicker([ "turnCreateDate", "bindCreateDate" ]);
        //1.初始化Table
    });


    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        function sumCol(data,colName){
            var count = 0;
            for(var i=0;i<data.length;i++){
                count+= parseFloat(data[i][colName])
            }
            return parseFloat(count.toFixed(2));
        }

        function triggerRemoveJsonEle(){
            var OrgArr = [{
                field: 'BYTSCORE',
                title: '序号'
            },{
                field: 'NAME',
                title: '店面名称'
            },{
                field: 'AMT',
                title: '实际销售额'
            }, {
                field: 'AIM',
                title: '任务计划金额'
            }, {
                field: 'NLEVEL1',
                title: '完成率'
            }, {
                field: 'NLEVEL2',
                title: '任务完成进度'
            }, {
                field: 'TOTAL_SALE',
                title: '累计销售额'
            }, {
                field: 'TOTAL',
                title: '累计计划金额'
            }, {
                field: 'GRADE',
                title: '全年任务完成率'
            }]
            console.log("4:"+OrgArr);
            return OrgArr;
        }
        function removeJsonEle(OrgArr,filterArr,toFilterField){
            var newArr = OrgArr;
            console.log("5:"+filterArr.length);
            for(j = 0,filterArrLen = filterArr.length;j < filterArrLen;j++){
                for(var i = 0,OrgArrLen = OrgArr.length;i < OrgArrLen;i++){
                    if(OrgArr[i][toFilterField] == filterArr[j]){
                        newArr = OrgArr.splice(i, 1);
                        break;
                    }
                }
            }
            return OrgArr;
        }
        function getFieldIndex(fieldName){
            var orgArr = triggerRemoveJsonEle();
            for(var i = 0,orgArrLen = orgArr.length;i < orgArrLen;i++){
                if(fieldName == orgArr[i]["field"]){
                    return i;
                }
            }
        }
        oTableInit.Init = function () {
            if($("#btn_query").hasClass("btn-info")){
                $("#btn_query").removeClass("btn-info").addClass("btn-default");
            }
            $('#kt_ssanalyse').bootstrapTable({
                url: '${contextPath}/ktcount/getktTaskAnalyse',         //请求后台的URL（*）
                method: 'POST',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10000,                       //每页的记录行数（*）
                pageList: [10, 50, 100,10000],        //可供选择的每页的行数（*）
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showHeader:true,
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                showFooter:false,
                columns: triggerRemoveJsonEle() ,
                contentType : "application/x-www-form-urlencoded",
                onLoadSuccess: function(data){
                    $("#btn_query").removeClass("btn-default").addClass("btn-info");

                },onLoadError:function(data){
                    $("#btn_query").removeClass("btn-default").addClass("btn-info");
                }
            });
        };
        oTableInit.queryParams = function (params) {

            var shopNameInfo = $("#shopName").val() == null ? "\'\'":$("#shopName").val().join(",");
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                shopId : shopNameInfo,
                turnCreateDate :$("#turnCreateDate").val().trim()
            };
            return temp;
        };
        return oTableInit;
    }

    function refreshFooterData(data){
        var visibleCols = $('#kt_ssanalyse').bootstrapTable('getVisibleColumns');
        var tds = $(".fixed-table-footer").find("td");
        for(i in visibleCols){
            if(visibleCols[i].hasOwnProperty("myFooterFormatter")){
                $(tds.get(visibleCols[i]["fieldIndex"])).find(".th-inner").html(visibleCols[i]["myFooterFormatter"].call(visibleCols[i],data))
            }
        }
    }
    var oTable = new TableInit();
    $("#btn_refresh").bind('click',function(){
        if($("#btn_query").hasClass("btn-default")){
            return;
        }
        $("#btn_query").removeClass("btn-info").addClass("btn-default");
        $("#productName").val("");
        $("#productCode").val("");
        $("#turnCreateDate").val(trans2FormatDate(new Date()));
        $("#bindCreateDate").val(trans2FormatDate(new Date()));
        $('#kt_ssanalyse').bootstrapTable('refresh', { url: '${contextPath}/ktcount/getktTaskAnalyse'});
    })
    $("#btn_query").bind("click",function(){
        if($("#btn_query").hasClass("btn-default")){
            return;
        }
        $("#btn_query").removeClass("btn-info").addClass("btn-default");
        $('#kt_ssanalyse').bootstrapTable('refresh', { url: '${contextPath}/ktcount/getktTaskAnalyse'});
    })
    function initDatetimepicker(arr) {
        arr.forEach(function(item, index, input) {
            $('#' + item).datetimepicker({
                language : 'zh-CN',
                weekStart : 1,
                todayBtn : 1,
                todayHighlight : 1,
                startView : 'year',
                forceParse : 0,
                showMeridian : 1,
                format : "yyyy-mm",
                autoclose : true,
                minView : 'year',
                maxView:'decade',
                initialDate:trans2FormatDate(new Date())
            }).on('changeDate', function(ev){
                var idVal = $(this).attr("id");
                var date = ev.date;
                if(idVal == "turnCreateDate"){
                    var m =(date.getMonth()+1) ;
                    if((m+"").length<2){
                        m="0"+m;
                    }
                    console.log(1);
                    $("#turnCreateDate").val(date.getFullYear()+"-"+m)
                }else{
                    $("#bindCreateDate").val(date.getFullYear()+"-"+(date.getMonth()+1))
                }
            });;
            $('#' + item).datetimepicker('setEndDate', trans2FormatDate(new Date()));
        })
        $('#turnCreateDate').val(trans2FormatDate(new Date(),false))
        $('#bindCreateDate').val(trans2FormatDate(new Date(),false))
    }
    function selectAll(){
        var hiddenCols = $('#kt_pss').bootstrapTable('getHiddenColumns');
        for(var i = 0,hiddenColsLen = hiddenCols.length;i<hiddenColsLen;i++){
            $('#kt_pss').bootstrapTable('showColumn', hiddenCols[i]["field"]);
            toggleFootrowTd(hiddenCols[i]["fieldIndex"],true)
        }
    }
    function unSelectAll(){
        var visibleCols = $('#kt_pss').bootstrapTable('getVisibleColumns');
        for(var i = 1,visibleColsLen = visibleCols.length;i<visibleColsLen;i++){
            $('#kt_pss').bootstrapTable('hideColumn', visibleCols[i]["field"]);
            toggleFootrowTd(visibleCols[i]["fieldIndex"],false)
        }
    }
    function trans2FormatDate(date,isMonth){
        date.setDate(date.getDate() - 1);
        isMonth && date.setMonth(date.getMonth()-1);

        if(((date.getMonth()+1)+"").length<2){
            return date.getFullYear()+"-"+('0'+date.getMonth()+1)
        }
        return date.getFullYear()+"-"+(date.getMonth()+1)
    }

    var exportExcel = function() {
        var visibleCols = $('#kt_ssanalyse').bootstrapTable('getVisibleColumns');
        var fields = "",titles = "";
        for(var i = 0,visibleColsLen = visibleCols.length;i<visibleColsLen;i++){
            fields += visibleCols[i]["field"]+",";
            titles += visibleCols[i]["title"]+",";
        }
        $("#colsTitles").val(titles.substring(0,titles.length-1));
        $("#colsFields").val(fields.substring(0,fields.length-1));
        $("#exportExcel").submit();

    }
    function doPrint() {
        bdhtml=window.document.body.innerHTML;
        sprnstr="<!--startprint-->";
        eprnstr="<!--endprint-->";
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
        window.document.body.innerHTML=prnhtml;
        window.print();
        window.location.reload(); //刷新当前页面
    }
    function timeCount(){
        var oDateUtil = new DateUtil();
        setInterval(function(){
            var date = new Date();
            var formatDate = oDateUtil.formatDate(date,"yyyy-MM-dd hh:mm:ss",true);
            $("#timeCount").html(formatDate)
        },1000)
    }

    function getArea(){
        $.ajax({
            url: '${contextPath}/ktcount/getAreas', //localhost:8080
            type: 'post',
            success: function (data) {
                var orginAreas = data.data;
                var setting = {
                    check: {
                        enable: true,
                        chkStyle: "checkbox",
                    },
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "ID",
                            pIdKey: "PARENT_ID",
                            rootPId: '',
                            areaCode:"ZONE_CODE"
                        },
                        key: {
                            name: "ZONE_NAME"
                        },
                    }
                };
                $.fn.zTree.init($("#areatree"), setting, orginAreas);
                oTable.Init();
            },
            error: function (error) {
                alert(error)
            }
        })

    }

    function selectedAreas(){
        $("#areaModal").modal('hide')
        var zTree = $.fn.zTree.getZTreeObj("areatree");
        var nodes = zTree.getCheckedNodes();
        var areaNameVal = "",areaCodeVal = "";
        for(var i = 0,nodesLen = nodes.length;i < nodesLen;i++){
            if(!nodes[i]["isParent"]){
                areaNameVal += nodes[i]["ZONE_NAME"]+",";
                areaCodeVal += nodes[i]["ZONE_CODE"]+",";
            }
        }
        if(nodes.length > 0){
            areaNameVal = areaNameVal.substring(0,areaNameVal.length-1);
            areaCodeVal = areaCodeVal.substring(0,areaCodeVal.length-1);

        }
        $("#areaName").val(areaNameVal)
        $("#areaCode").val(areaCodeVal)
        getShop();
    }

    function getShop(){
        $.ajax({
            url: '${contextPath}/ktcount/getShops', //localhost:8080
            data:{"zoneCode":$("#areaCode").val()},
            type: 'post',
            success: function (data) {
                var data = data.data;
                var dstore = '<optgroup label="直营" data-icon="glyphicon-ok">',nstore = '<optgroup label="加盟" data-icon="glyphicon-ok">';
                for(var i = 0;i < data.length;i++){
                    if('直营' == data[i]["shopType"]){
                        dstore +='<option value="'+data[i]["shopId"]+'">'+data[i]["shopName"]+'</option>';
                    }

                }
                dstore += '</optgroup>';
                nstore += '</optgroup>';
                $("#shopName").html(dstore+nstore);
                $('#shopName').selectpicker('refresh');
                $('#shopName').selectpicker('selectAll');
            },
            error: function (error) {
                alert(error)
            }
        })
    }
</script>
</html>